<template>
	<view class="">
		<view class="logintype">
			<view class="loginimg">
				<image style="width: 100%;height: 100%;" src="https://test.asiatop.net/ry-app/static/logo.png" mode=""></image>
			</view>
		</view>
		
		<button class="loginButton"  plain="true" style="borderColor:#fa436a;color:#fa436a;" hover-class="is-hover" @click="login">账号登录</button>
		
		<view class="logintitle" @click="handleButton">
			   <span ><view :class="[status? 'yuan':'fang' ] " ></view></span><span style="padding-left: 8rpx;">  同意</span> <span class="logintext">{{`《注册协议》《隐私协议》` }}</span>
		</view>
		<!-- 弹框 -->
		 <uni-popup ref="popup" type="center"  before-close="true">
		      <view class="pop">
		        <view class="title"> 服务协议和隐私政策  </view>
		        <view class="tip-info">
					  <view class="">  <span>{{content}}</span> </view>
					  <view class="">
							<span>您可以阅读</span><span class="blue">《注册协议》</span><span>和</span><span class="blue">《隐私协议》</span><span>了解详细信息。如您同意，请点击"暂不使用"开始接受我们的服务。</span>
					  </view>
		        </view>
				<view class="sure">
					<view class="" @click="cancal"> 暂不使用	</view>        
					<view class="" @click="ok"> 同意</view>
				</view>
		      </view>
		    </uni-popup>
	</view>
</template>
<script setup>
	import {ref,reactive,computed } from 'vue'
	import { onLoad } from '@dcloudio/uni-app'
	// import { getCard } from '@/common/js/api.js'
	const app = getApp()
	// 是否同意协议
	const status = ref(false)
	const content = ref('请您务必认真阅读、充分理解“服务协议”和“隐私政策”各条款，包括但不限于：为了向您提供数据、分享等服务所要获取的权限信息。')
	const popup =ref()
	const handleButton =() =>{
		// 打开弹框
		status.value = !status.value;
		popup.value.open('center')
		console.log('red');
	}
	
	const cancal=()=>{
		popup.value.close()
	}
	const ok=()=>{
		popup.value.close()
		status.value ==true
		console.log('>')
	}
	// 跳转到登录页面
	const login = ()=>{
		console.log(status,'？？？？')
		if(status.value ==true ){
			console.log('>登录')
			uni.reLaunch({
				url: '/pages/login/index'
			});
		}else{
			return uni.showToast({
				title:'请勾选并阅读协议，才能进行下一步哦',
				icon:'none',
				duration:1000
			})
		}
	}
	
	
</script>
<style lang="scss" scoped>
	
	page{
		background-color: #fff;
	}
	.logintype{
		text-align: center;
		margin-bottom: 80rpx;
		padding-top: 30rpx;
		display: flex;
		justify-content: center;
		.loginimg{
			width: 180rpx;
			height: 180rpx;
			border-radius: 28rpx;  
		}
	}

	
	.loginButton{
		border-radius: 60rpx;
		width: 83%;
	}
	.logintitle{
		display: flex;
		justify-content: center;
		font-size: 24rpx;
		text-align: center;
		padding-top: 40rpx;
		align-items: center;
	}
	.logintext{
		color:#fa436a;
		font-size: 24rpx;

	}
	.yuan{
		width: 20rpx;
		height: 20rpx;
		border-radius: 25rpx;
		background-color: #fa436a;
		border:1px solid #000;
		
		
	}
	.fang{
		width: 20rpx;
		height: 20rpx;
		border-radius: 25rpx;
		border:1px solid #000;
	}
	
	
	
	
	
	
	
	
	// 弹框
	.pop {
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    transform: translate(-50%,-50%);
	    background-color: #fff;
	    border-radius: 16rpx;
	    height: 500rpx;
	    z-index: 99;
	    width: 560rpx;
	    padding: 40rpx 0;
	  }
	  .title {
	    text-align: center;
	    font-size: 28rpx;
	    font-weight: 500;
	    // margin-top: 38rpx;
	  }


	  .tip-info {
	    padding: 0 30rpx;
	    font-size: 28rpx;
	    color: #666;
	    margin-top: 20rpx;
	    margin-bottom: 34rpx;
	    text-align: center;
		text-align: left;
	  }
	  .sure {
	    width: 100%;
	    border-top: 1rpx solid #d1d1d1;
	    height: 112rpx;
	    text-align: center;
	    line-height: 112rpx;
	    color: #02A53C;
	    font-size: 34rpx;
	    font-weight: 500;
		display: flex;
		    justify-content: space-around;
	  }
	  .blue{
		  color: #007aff;
	  }

	
</style>
